<template>
  <div>
    <a-drawer
      title="商品详情"
      placement="right"
      :closable="false"
      :width="drawerWidth"
      :visible="visible"
      @close="handleCancel"
      style="height: 100%;overflow: auto;padding-bottom: 53px;"
      class="detail-drawer"
      id="version-drawer"
    >
      <GoodsDetail :goodsInfo="queryGoods" :permisTree="permisTree" :originTreeList="originTreeList"></GoodsDetail>
      <a-back-top :target="targetFn" :visibilityHeight="300" />
    </a-drawer>
  </div>
</template>
<script>
import { goodsDetail } from '@/api/goods'
import GoodsDetail from '../../GoodsDetail.vue'
export default {
  props: {
    goodsInfo: {
      type: Object,
      default: null
    },
    showDrawer: {
      type: Boolean,
      default: false
    },
    permisTree: {
      type: Array,
      default: null
    },
    originTreeList: {
      type: Array,
      default: null,
      required: false
    }
  },
  components: {
    GoodsDetail
  },
  data() {
    return {
      visible: false,
      queryGoods: {},
      drawerWidth: '60vw'
    }
  },
  watch: {
    goodsInfo: {
      handler(value, oldValue) {
        console.log(value, oldValue)
        this.queryGoods = JSON.parse(JSON.stringify(value))
      },
      deep: true
    },
    showDrawer(value) {
      if (value) {
        this.visible = true
      }
    }
  },
  mounted() {
    // this.getGoods(this.queryGoods)
  },
  methods: {
    close() {
      this.$emit('close', false)
      this.visible = false
      this.queryGoods = {}
      // this.disableSubmit = false;
      // this.nextDepartOptions=[];
      // this.departIdShow=false;
      // this.$refs.form.resetFields();
    },
    handleCancel() {
      this.close()
    },
    async getGoods(params) {
      this.resetScreenSize()
      const data = await this.fetchData(params)
    },
    fetchData(params) {
      let data = {
        requestData: {
          productId: params.productId
        }
      }
      goodsDetail(data).then(res => {
        if (res.code == 0) {
          return res.data
        } else {
          this.$message.warning(res.msg)
          return {}
        }
      })
    },
    // 根据屏幕变化,设置抽屉尺寸
    resetScreenSize() {
      let screenWidth = document.body.clientWidth
      if (screenWidth < 500) {
        this.drawerWidth = screenWidth
      } else {
        this.drawerWidth = 1000
      }
    },
    targetFn() {
      return document.querySelector('#version-drawer .ant-drawer-wrapper-body')
    }
  }
}
</script>
<style lang="less" scoped>
.detail-drawer {
  /deep/ .ant-drawer-body {
    padding: 0;
  }
}
</style>

